<template>
  <button :class="btnStyle[myType]" class="btn">我是button</button>
</template>

<script>
const btnObj = {
  'success': 'green',
  'warning': 'orange',
  'danger': 'red'
}
export default {
  data() {
    return {
      btnStyle: btnObj
    }
  },
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据
  //要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props
  //子组件要显式地用 props 选项声明它期待获得的数据
  props: {
    //子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法
    'my-type': {
      type: String
    },
    // 'myType': {
    //   type: String
    // }
  }
}
</script>

<style lang="less">
.btn {
  color: #fff;
  width: 80px;
  height: 50px;
  border-radius: 8px;
  margin: 2px;
  border: none;
}
.green {
  background-color: green;
}
.orange {
  background-color: orange;
}
.red {
  background-color: red;
}
</style>